.overflow-hidden {
  overflow: hidden;
}
.overflow-x-hidden {
  overflow-x: hidden;
}
.overflow-y-hidden {
  overflow-y: hidden;
}
.overflow-x-scroll {
  overflow-x: scroll;
}
.overflow-y-scroll {
  overflow-y: scroll;
}
.overflow-x-auto {
  overflow-x: auto;
}
.overflow-y-auto {
  overflow-y: auto;
}
.block {
  display: block;
}
.inline {
  display: inline;
}
.inline-block {
  display: inline-block !important;
}
.inline-flex {
  display: inline-flex !important;
}
.inline-flexbox {
  display: inline-flex;
}
.m-relative {
  position: relative !important;
}
.m-absolute {
  position: absolute !important;
}
.m-fixed {
  position: fixed !important;
}
.m-sticky {
  position: -webkit-sticky !important;
  position: sticky !important;
}
.box-full {
  width: 100% !important;
  height: 100% !important;
}
.h-full {
  height: 100% !important;
}
.h-screen {
  height: 100vh !important;
}
.h-auto {
  height: auto !important;
}
.w-full {
  width: 100% !important;
}
.w-screen {
  width: 100vw !important;
}
.w-auto {
  width: auto !important;
}
.w-fit {
  width: fit-content !important;
}
.w-700 {
  width: 700px !important;
}
.nowrap {
  white-space: nowrap;
  flex-wrap: nowrap;
}

//溢出隐藏单行
.text-overflow-1 {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

//溢出隐藏多行
@each $i in 2, 3, 4 {
  .text-overflow-#{$i} {
    width: 100%;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: #{$i};
    -webkit-box-orient: vertical;
  }
}

@each $i in 1, 2, 3, 4 {
  .flex-#{$i} {
    flex: #{$i};
  }
}

.position-center {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.position-center-x {
  left: 50%;
  transform: translateX(-50%);
}
.position-center-y {
  top: 50%;
  transform: translateY(-50%);
}
.break-word {
  word-wrap: break-word;
}
.text-through {
  text-decoration: line-through;
}
.text-underline {
  text-decoration: underline;
}

@each $weight in 100, 400, 500, 700, 800 {
  .font-weight-#{$weight} {
    font-weight: #{$weight};
  }
}

.font-bold {
  font-weight: bold;
}
.text-align-left {
  text-align: left;
}

.text-align-right {
  text-align: right;
}

.text-align-center {
  text-align: center;
}

.opacity-0 {
  opacity: 0;
}
.opacity-1 {
  opacity: 0.1;
}
.opacity-2 {
  opacity: 0.2;
}
.opacity-3 {
  opacity: 0.3;
}
.opacity-4 {
  opacity: 0.4;
}
.opacity-5 {
  opacity: 0.5;
}
.opacity-6 {
  opacity: 0.6;
}
.opacity-7 {
  opacity: 0.7;
}
.opacity-8 {
  opacity: 0.8;
}
.opacity-9 {
  opacity: 0.9;
}
.opacity-10 {
  opacity: 1;
}

@each $i in 10, 12, 14, 16, 18, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 60, 100 {
  .text-size-#{$i} {
    font-size: #{$i}px;
  }
}

@each $i in 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 60, 100 {
  .round-#{$i} {
    border-radius: #{$i}px;
  }
  .round-t-#{$i} {
    border-top-left-radius: #{$i}px;
    border-top-right-radius: #{$i}px;
  }
  .round-b-#{$i} {
    border-bottom-left-radius: #{$i}px;
    border-bottom-right-radius: #{$i}px;
  }
  .round-l-#{$i} {
    border-bottom-left-radius: #{$i}px;
    border-top-left-radius: #{$i}px;
  }
  .round-r-#{$i} {
    border-top-right-radius: #{$i}px;
    border-bottom-right-radius: #{$i}px;
  }
  .round-tl-#{$i} {
    border-top-left-radius: #{$i}px;
  }
  .round-tr-#{$i} {
    border-top-right-radius: #{$i}px;
  }
  .round-bl-#{$i} {
    border-bottom-left-radius: #{$i}px;
  }
  .round-br-#{$i} {
    border-bottom-right-radius: #{$i}px;
  }
}

.round-50-percent,
.round-50-p {
  border-radius: 50%;
}

@each $i in 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 9999, 99999 {
  .z-index-#{$i} {
    z-index: #{$i};
  }
}

@for $i from 0 through 100 {
  .line-h-#{$i} {
    line-height: #{$i}px;
  }
  .t-#{$i} {
    top: #{$i}px;
  }
  .l-#{$i} {
    left: #{$i}px;
  }
  .r-#{$i} {
    right: #{$i}px;
  }
  .b-#{$i} {
    bottom: #{$i}px;
  }
  .m-#{$i} {
    margin: #{$i}px;
  }
  .mr-#{$i} {
    margin-right: #{$i}px;
  }
  .ml-#{$i} {
    margin-left: #{$i}px;
  }
  .mt-#{$i} {
    margin-top: #{$i}px;
  }
  .mb-#{$i} {
    margin-bottom: #{$i}px;
  }
  .mx-#{$i} {
    margin-left: #{$i}px;
    margin-right: #{$i}px;
  }
  .my-#{$i} {
    margin-top: #{$i}px;
    margin-bottom: #{$i}px;
  }
  .p-#{$i} {
    padding: #{$i}px;
  }
  .pr-#{$i} {
    padding-right: #{$i}px;
  }
  .pl-#{$i} {
    padding-left: #{$i}px;
  }
  .pt-#{$i} {
    padding-top: #{$i}px;
  }
  .pb-#{$i} {
    padding-bottom: #{$i}px;
  }
  .px-#{$i} {
    padding-left: #{$i}px;
    padding-right: #{$i}px;
  }
  .py-#{$i} {
    padding-top: #{$i}px;
    padding-bottom: #{$i}px;
  }
  .line-h-#{$i}n {
    line-height: #{$i * 4}px;
  }
  .t-#{$i}n {
    top: #{$i * 4}px;
  }
  .l-#{$i}n {
    left: #{$i * 4}px;
  }
  .r-#{$i}n {
    right: #{$i * 4}px;
  }
  .b-#{$i}n {
    bottom: #{$i * 4}px;
  }
  .m-#{$i}n {
    margin: #{$i * 4}px;
  }
  .mr-#{$i}n {
    margin-right: #{$i * 4}px;
  }
  .ml-#{$i}n {
    margin-left: #{$i * 4}px;
  }
  .mt-#{$i}n {
    margin-top: #{$i * 4}px;
  }
  .mb-#{$i}n {
    margin-bottom: #{$i * 4}px;
  }
  .mx-#{$i}n {
    margin-left: #{$i * 4}px;
    margin-right: #{$i * 4}px;
  }
  .my-#{$i}n {
    margin-top: #{$i * 4}px;
    margin-bottom: #{$i * 4}px;
  }
  .p-#{$i}n {
    padding: #{$i * 4}px;
  }
  .pr-#{$i}n {
    padding-right: #{$i * 4}px;
  }
  .pl-#{$i}n {
    padding-left: #{$i * 4}px;
  }
  .pt-#{$i}n {
    padding-top: #{$i * 4}px;
  }
  .pb-#{$i}n {
    padding-bottom: #{$i * 4}px;
  }
  .px-#{$i}n {
    padding-left: #{$i * 4}px;
    padding-right: #{$i * 4}px;
  }
  .py-#{$i}n {
    padding-top: #{$i * 4}px;
    padding-bottom: #{$i * 4}px;
  }
  .w-#{$i} {
    width: #{$i}px;
  }
  .h-#{$i} {
    height: #{$i}px;
  }
  .w-#{$i}n {
    width: #{4 * $i}px;
  }
  .h-#{$i}n {
    height: #{4 * $i}px;
  }
}

.m-m {
  margin: $margin;
}
.mt-m {
  margin-top: $margin;
}
.mr-m {
  margin-right: $margin;
}
.mb-m {
  margin-bottom: $margin;
}
.ml-m {
  margin-left: $margin;
}
.mx-m {
  margin-left: $margin;
  margin-right: $margin;
}
.my-m {
  margin-top: $margin;
  margin-bottom: $margin;
}
.p-m {
  padding: $margin;
}
.pt-m {
  padding-top: $margin;
}
.pr-m {
  padding-right: $margin;
}
.pb-m {
  padding-bottom: $margin;
}
.pl-m {
  padding-left: $margin;
}
.px-m {
  padding-left: $margin;
  padding-right: $margin;
}
.py-m {
  padding-top: $margin;
  padding-bottom: $margin;
}
.mx-auto {
  margin: 0 auto;
}
.ml-auto {
  margin-left: auto;
}
.mr-auto {
  margin-right: auto;
}
.flex {
  display: flex;
  flex-direction: row;
}
.flex-center {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.flex-col {
  display: flex;
  flex-direction: column;
}
.flex-col-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.flex-wrap {
  flex-wrap: wrap;
}
.flex-j-s {
  justify-content: flex-start !important;
}
.flex-j-c {
  justify-content: center !important;
}
.flex-j-e {
  justify-content: flex-end !important;
}

.flex-j-b {
  justify-content: space-between !important;
}
.flex-j-a {
  justify-content: space-around !important;
}
.flex-a-c {
  align-items: center !important;
}
.flex-a-s {
  align-items: flex-start !important;
}
.flex-a-e {
  align-items: flex-end !important;
}
.flex-a-s-c {
  align-self: center !important;
}
.flex-a-s-s {
  align-self: flex-start !important;
}
.flex-a-s-e {
  align-self: flex-end !important;
}
.textfff {
  color: #fff !important;
}
.text888 {
  color: #888888 !important;
}
.text999 {
  color: #999999 !important;
}
.text-red {
  color: red !important;
}
.text666 {
  color: #666666 !important;
}
.text333 {
  color: #333333 !important;
}
.text000 {
  color: #000000 !important;
}
.textf7 {
  color: #f7f7f7 !important;
}
.textf5 {
  color: #f5f5f5 !important;
}
.textf4 {
  color: #f4f4f4 !important;
}
.textf3 {
  color: #f3f3f3 !important;
}
.textf8 {
  color: #f8f8f8 !important;
}
.textccc {
  color: #ccc;
}
.bgfff {
  background: #fff !important;
}
.bg888 {
  background: #888888 !important;
}
.bg999 {
  background: #999999 !important;
}
.bg666 {
  background: #666666 !important;
}
.bg333 {
  background: #333333 !important;
}
.bgf5 {
  background: #f5f5f5 !important;
}
.bgf4 {
  background: #f4f4f4 !important;
}
.bgf3 {
  background: #f3f3f3 !important;
}
.bgf8 {
  background: #f8f8f8 !important;
}
.box-border {
  box-sizing: border-box;
}
.box-content {
  box-sizing: content-box;
}

.arco-table-td-content .arco-btn-text {
  padding: 0 8px !important;
}

.arco-drawer-footer {
  padding: 20px 16px;
  text-align: center;
}

.cursor-pointer {
  cursor: pointer;
}

.card1 {
  background: linear-gradient(145deg, #fb923c, #db2777);
}
.card2 {
  background: linear-gradient(145deg, #4ade80, #06b6d4);
}
.card3 {
  background: linear-gradient(145deg, #a855f7, #6366f1);
}
.card4 {
  background: linear-gradient(145deg, #22d3ee, #0ea5e9);
}
.card5 {
  background: linear-gradient(145deg, #facc15, #f97316);
}
.card6 {
  background: linear-gradient(145deg, #fb923c, #db2777);
}
.card7 {
  background: linear-gradient(145deg, #bef264, #10b981);
}
.card8 {
  background: linear-gradient(145deg, #ec4899, #f43f5e);
}
.card9 {
  background: linear-gradient(145deg, #fb923c, #9333ea);
}
.card10 {
  background: linear-gradient(145deg, #d946ef, #9333ea);
}
